{% extends "base.html" %}
{% block title %}{{word_text}} &mdash; статистика{% endblock %}

{% block contentheader %}Статистика слова {{word_text}}{% endblock %}
{% block content %}
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
    google.load("visualization", "1", {packages:["corechart"]});
    google.setOnLoadCallback(onLoad);

    function onLoad()
    {
        {% if word_exists %}
            {% if hat_standart != None %}
                drawChart({{hat_standart.histogram_ttime}}, 'Общее время объяснения', 'hist_ttime_div', 20);
                drawChart({{hat_standart.histogram_nattempt}}, 'Количество попыток объяснить', 'hist_nattempt_div', 5);
            {% endif %}
            {% if crocodile != None %}
                drawChart({{crocodile.histogram_ttime}}, 'Общее время объяснения', 'croc_ttime_div', 20);
                drawChart({{crocodile.histogram_nattempt}}, 'Количество попыток объяснить', 'croc_nattempt_div', 5);
            {% endif %}
        {% endif %}
    }

    function drawChart(histogram, title, place_id, max_value)
    {
        var data = google.visualization.arrayToDataTable(histogram);

        var options = {
            hAxis: {title: title, gridlines: {count: 5}, format: '#', minValue: 0, maxValue: max_value},
            vAxis: {gridlines: {count: 3}},
            isStacked: true,
            enableInteractivity: false,
            chartArea: {width: "65%", left: "10%"},
            colors: ['green', 'red'],
            backgroundColor: 'transparent',
            bar: {groupWidth: 20}
        };

        var chart = new google.visualization.ColumnChart(document.getElementById(place_id));
        chart.draw(data, options);
    }
</script>

<div class="statdiv">
    {% if word_exists %}
        <p>Информация о слове {{word_text}} существует!</p>
        {% if hat_standart != None %}
            <p><h3>Игра &laquo;Шляпа&raquo;:</h3><p>
            <p>Всего игр со словом: {{hat_standart.total_games}}</p>
            <p>Угадано: {{hat_standart.total_guess}} ({{hat_standart.guess_percent | percent}})</p>
            <p>Фолов: {{hat_standart.total_fail}} ({{hat_standart.fail_percent | percent}})</p>
            <p>Среднее время объяснения: {{hat_standart.time_average_sec | time_sec}}</p>
            <div id="hist_ttime_div" style="width: 90%;"></div>
            <div id="hist_nattempt_div" style="width: 90%;"></div>
        {% endif %}
        {% if crocodile != None %}
            <p><h3>Игра &laquo;Крокодил&raquo;:</h3><p>
            <p>Всего игр со словом: {{crocodile.total_games}}</p>
            <p>Угадано: {{crocodile.total_guess}} ({{crocodile.guess_percent | percent}})</p>
            <p>Фолов: {{crocodile.total_fail}} ({{crocodile.fail_percent | percent}})</p>
            <p>Среднее время объяснения: {{crocodile.time_average_sec | time_sec}}</p>
            <div id="croc_ttime_div" style="width: 90%;"></div>
            <div id="croc_nattempt_div" style="width: 90%;"></div>
        {% endif %}
    {% else %}
        <p>К сожалению, достаточной статистики по слову <b>{{word_text}}</b> еще не собрано. <br/>
        Попробуйте проверить последнюю позже!</p>
    {% endif %}
</div>
<form action="/word_statistic.html" method="GET">
    <div class="formdiv">
        <p>Введите слово</p>
        <input type="text" name="word" size="20"><br/>
        <input type="submit" value="К статистике!">
    </div>
{% endblock %}
